<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.page.partition')">
            <el-select
              v-model="formInline.partitionId"
              placeholder
              @visible-change="hasPartitionOptions">
              <el-option
                v-for="(item,index) in partitionOptions"
                :key="index"
                :label="item.partitionname"
                :value="item.partitionid"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.page.location')">
            <el-input maxlength="20" show-word-limit v-model="formInline.locationCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="SKU">
            <el-input maxlength="20" show-word-limit v-model="formInline.productSpecCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.productname')">
            <el-input maxlength="20" show-word-limit v-model="formInline.productName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search(formInline)">{{$t('m.query')}}</el-button>
          <el-button @click="print">{{$t('m.stock.printlocation')}}</el-button>
          <el-button @click="printSku">{{$t('m.print')}} SKU</el-button>
          <el-button type="primary" @click="exportMethod">{{$t('m.export')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-row class="table-wrap">
      <el-col :span="24">
        <el-table
          ref="table"
          stripe
          empty-text
          fit
          v-loading="tableLoading"
          :data="tableData"
          :row-style="tableRowStyle"
          :row-class-name="tableRowClassName"
          @row-click="rowClick"
          @selection-change="handleMultiSelectionChange">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="warehousename" :label="$t('m.page.warehouse')"></el-table-column>
          <el-table-column align="center" :label="$t('m.page.partition')">
            <template slot-scope="scope">{{scope.row.partitionid|partitionFilters}}</template>
          </el-table-column>
          <el-table-column align="center" prop="locationcode" :label="$t('m.page.location')"></el-table-column>
          <el-table-column align="center" prop="productspeccode" label="SKU"></el-table-column>
          <el-table-column align="center" prop="productname" :label="$t('m.in.productname')" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="productstock" :label="$t('m.stock.productstock')"></el-table-column>
          <el-table-column align="center" prop="unavailablestock" :label="$t('m.stock.unavailablestock')"></el-table-column>
        </el-table>

        <el-pagination
          background
          layout="sizes, prev, pager, next, jumper"
          :page-sizes="pageSizeList"
          :page-size="rowSize"
          :current-page="page"
          :total="totalRows"
          @current-change="currentChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- table数据展示 end -->
  </div>
</template>
<script>
import common from '@/utils/common'
import { getLodop } from '@/utils/LodopFuncs'
let __this
export default {
  name:'stockInfo',
  data(){
    return {
      formInline:{
        partitionId:'', // 库区
        locationCode:'', // 库位
        productSpecCode:'', // sku
        productName:'' // 产品名称
      },
      partitionOptions:[], // 库区名及id
      tableData:[]
    }
  },
  beforeCreate(){
    __this = this
  },
  mounted(){
    this.getData()
    this.getPartition()
  },
  filters:{
    partitionFilters(val){
      if (__this.partitionOptions.length){
        let item = __this.partitionOptions.find(item => {
          return item.partitionid === val
        })
        return item?item.partitionname:''
      } else {
        return ''
      }
    }
  },
  watch:{
    '$i18n.locale'(){
      new Promise(resolve => {
        this.getData(resolve)
      }).then(data => {
        this.getPartition(data)
      })
    }
  },
  methods:{
    exportMethod(){
      common.exportMethod(`/excel/export/locationstock`)
    },
    search(){
      this.page = 1
      this.getData()
    },
    print(){
      let that = this
      if (!that.tableRowSelected.length){
        that.$message(this.$t('m.chooseprint') + this.$t('m.page.location'))
      } else {
        let LODOP = getLodop()
        let arr = []
        that.tableRowSelected.forEach(v => {
          arr.push(v.locationcode)
        })
        that
          .$axios({
            method:'post',
            url:'/printtemplate/printlocationcode',
            data:arr
          })
          .then(({data})=> {
            that.printContent = data
            that.printContent +=
              'LODOP.SET_PRINT_PAGESIZE(1, "50mm", "30mm", "");LODOP.PREVIEW();'
            eval(that.printContent)

          })
      }
    },
    printSku(){
      let that = this
      if (!that.tableRowSelected.length){
        that.$message(this.$t('m.chooseprint') + 'SKU')
      } else {
        let LODOP = getLodop()
        let arr = []
        that.tableRowSelected.forEach(v => {
          arr.push({
            fullspecvlue:v.productspec,
            number:v.productstock,
            sku:v.productspeccode
          })
        })
        that
          .$axios({
            method:'post',
            url:'/printtemplate/printsku',
            data:arr
          })
          .then(({data})=> {
            that.printContent = data
            that.printContent +=
              'LODOP.SET_PRINT_PAGESIZE(1, "50mm", "30mm", "");LODOP.PREVIEW();'
            eval(that.printContent)
          })
      }
    },
    getData(){
      let warehouseid = this.$store.state.basicInfo.warehouseInfo.id
      let data = Object.assign({}, this.formInline, {pageIndex:this.page,pageSize:this.rowSize,warehouseid})
      if (!data.partitionId) data.partitionId = 0

      let options = {
        withCredentials:false,
        method:'post',
        url:`${window._config_.stockUrl}/api/LocationStock/GetLocationStockInfo`,
        data
      }
      this.tableLoading = true
      this.$axios(options).then(({data,count}) => {
        this.tableData = data
        this.totalRows = count
        setTimeout(()=>this.tableLoading=false,500)
        if (!this.tableData.length) return this.callbackMessage(this.$t('m.nodata'))
      })
    },
    // 根据仓库id获取对应库区
    getPartition(){
      let warehouseid = this.$store.state.basicInfo.warehouseInfo.id
      let options = {
        method:'get',
        url:`/partition/list/${warehouseid}`
      }
      this.$axios(options).then(({ data }) => {
        this.partitionOptions = data.list
        this.partitionOptions.unshift({
          partitionname:this.$t('m.all'),
          partitionid:''
        })
      })
    },
    //  判断用户是否已经选择了库区
    hasPartitionOptions(visible){
      if (visible){
        if (!this.partitionOptions.length)
          return this.callbackMessage(this.$t('m.stock.step'))
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
</style>